<template>
    <el-main>
        <!-- 表头搜索新增表单 -->
        <el-form
                size="normal"
                :model="searchForm"
                ref="searchForm"
                label-width="80px"
        >
            <el-row>
                <el-col :span="10">
                    <el-form-item label="名称">
                        <el-input v-model="searchForm.roleName" ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6" :offset="0">
                    <el-button
                            style="margin-left: 20px"
                            size="normal"
                            type="primary"
                            icon="el-icon-search"
                    >搜索
                    </el-button
                    >
                    <el-button
                            @click="addMenu"
                            size="normal"
                            type="primary"
                            icon="el-icon-plus"
                    >新增
                    </el-button
                    >
                </el-col>
            </el-row>
        </el-form>

        <!-- 权限数据表 -->
        <el-table
                :height="tableHeight"
                size="mini"
                :data="menuList"
                style="width: 100%; margin-bottom: 20px"
                row-key="id"
                border
                :tree-props="{ children: 'children' }"
                :expand-row-keys="['17']"
        >
            <el-table-column
                    prop="label"
                    label="名称"
                    sortable
                    width="180"
            ></el-table-column>
            <el-table-column prop="icon" label="图标" sortable width="80">
                <template slot-scope="scope">
                    <i :class="scope.row.icon || ''"></i>
                </template>
            </el-table-column>
            <el-table-column prop="type" label="类型">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.type === '0'" size="small">目录</el-tag>
                    <el-tag v-else-if="scope.row.type === '1'" size="small" type="success"
                    >菜单
                    </el-tag
                    >
                    <el-tag v-else-if="scope.row.type === '2'" size="small" type="info"
                    >按钮
                    </el-tag
                    >
                </template>
            </el-table-column>
            <el-table-column prop="url" label="菜单URL(VUE的组件路径)"></el-table-column>
            <el-table-column prop="name" label="路由地址(访问路由地址)"></el-table-column>
            <el-table-column prop="code" label="权限标识(code)"></el-table-column>
            <el-table-column prop="orderNum" label="序号"></el-table-column>
            <el-table-column width="170" align="center" label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="editMenu(scope.row)"
                    >编辑
                    </el-button
                    >
                    <el-button size="mini" type="danger" @click="handleDelete(scope.row)"
                    >删除
                    </el-button
                    >
                </template>
            </el-table-column>
        </el-table>

        <!--新增权限-->
        <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="45%">
            <el-form
                    :rules="addMenuValidate"
                    :inline="true"
                    size="normal"
                    :model="addFrom"
                    ref="addFrom"
                    label-width="80px"
            >
                <el-row>
                    <el-col :span="24">
                        <el-form-item prop="type" label="权限类型">
                            <el-radio-group v-model="addFrom.type">
                                <el-radio :label="'0'" border>目录</el-radio>
                                <el-radio :label="'1'" border>菜单</el-radio>
                                <el-radio :label="'2'" border>按钮</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8" :offset="0">
                        <el-form-item prop="parentName" label="上级菜单">
                            <el-input
                                    readonly
                                    @click.native="selectParent"
                                    v-model="addFrom.parentName"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10" :offset="0">
                        <el-form-item prop="label" label="权限名称">
                            <el-input v-model="addFrom.label"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" :offset="0">
                        <el-form-item
                                prop="icon"
                                v-if="addFrom.type != '2'"
                                label="菜单图标"
                        >
                            <el-input v-model="addFrom.icon"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12" :offset="0" v-if="addFrom.type == '2'">
                        <el-form-item label="显示序号">
                            <el-input-number v-model="addFrom.orderNum"></el-input-number>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12" :offset="0" v-else>
                        <el-form-item label="显示序号">
                            <el-input-number v-model="addFrom.orderNum"></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :offset="0">
                        <el-form-item
                                size="medium"
                                prop="path"
                                v-if="addFrom.type != '2'"
                                label="路由地址"
                        >
                            <el-input v-model="addFrom.path"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row v-if="addFrom.type == '1'">
                    <el-col :span="8" :offset="0">
                        <el-form-item prop="name" label="路由名称">
                            <el-input v-model="addFrom.code"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10" :offset="0">
                        <el-form-item prop="url" label="组件路径">
                            <el-input v-model="addFrom.url"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="6" :offset="0">
                        <el-form-item prop="code" label="权限标识">
                            <el-input v-model="addFrom.name"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addComit">确 定</el-button>
      </span>
        </el-dialog>

        <!--选择上级菜单-->
        <el-dialog title="上级菜单" :visible.sync="parentDialogVisible" width="25%">
            <tree :nodes="nodes" :setting="parentSetting"/>
            <span slot="footer" class="dialog-footer">
        <el-button @click="parentDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="parentDialogVisible = false"
        >确 定</el-button
        >
      </span>
        </el-dialog>
    </el-main>
</template>

<script>
    import tree from "vue-giant-tree";
    import api from "../../../utils/axios/api"
    export default {
        name: "menuList",
        components: {
            tree,
        },
        data() {
            return {
                // 上级节点树控件设置
                parentSetting: {
                    view: {
                        showLine: true,
                        showIcon: false,
                        fontCss: {"font-size": "12px", color: "#333"},
                    },
                    //设置这里会显示复选框
                    // check: {
                    //   enable: true
                    // },
                    data: {
                        simpleData: {
                            enable: true,
                            idKey: "id",
                            pIdKey: "pid",
                            rootPId: "0",
                        },
                    },
                    callback: {
                        onClick: this.ztreeParentOnClick,
                    },
                },
                // 上级菜单节点数据
                // 编辑模式 0新增 1编辑
                editTag: "0",
                nodes: [

                ],
                // 是否显示上级菜单的对话框
                parentDialogVisible: false,
                // 新增编辑对话框标题
                dialogTitle: "新增菜单",
                // 新增编辑对话框是否可见
                dialogVisible: false,
                // 表单验证规则
                addMenuValidate: {
                    type: [{required: true, trigger: "change", message: "请选择类型"}],
                    label: [
                        {required: true, trigger: "change", message: "请填写权限名称"},
                    ],

                },
                // 新增编辑的表单模型
                addFrom: {
                    id: "", //编辑id
                    label: "",
                    name: "",
                    type: "0",
                    parentId: "",
                    orderNum: "",
                    parentName: "",
                    path: "",
                    code: "",
                    icon: "",
                    url:""
                },
                // 表格数据
                menuList: [
                ],

                // 搜索表单的模型
                searchForm: {
                    roleName: "",
                },

                // 表格高度
                tableHeight: 0,

                //   表格数据
                tableData1: [
                    {
                        id: 1,
                        date: "2016-05-02",
                        name: "王小虎",
                        address: "上海市普陀区金沙江路 1518 弄",
                    },
                    {
                        id: 2,
                        date: "2016-05-04",
                        name: "王小虎",
                        address: "上海市普陀区金沙江路 1517 弄",
                    },
                    {
                        id: 3,
                        date: "2016-05-01",
                        name: "王小虎",
                        address: "上海市普陀区金沙江路 1519 弄",
                        hasChildren: true,
                    },
                    {
                        id: 4,
                        date: "2016-05-03",
                        name: "王小虎",
                        address: "上海市普陀区金沙江路 1516 弄",
                        hasChildren: true,
                    },
                ],
            };
        },
        methods: {
            ztreeParentOnClick(evt, treeId, treeNode) {
                this.addFrom.parentName = treeNode.name;
                this.addFrom.parentId = treeNode.id;
            },
            // 提交新增编辑
             addComit() {
                let _this=this;
                let res=null;
                _this.$refs.addFrom.validate(
                    async valid=>{
                        if(valid){
                            let params=_this.addFrom;
                            if(_this.editTag=='0'){
                               res=await api.addNewPermission(params);
                            }
                            if(_this.editTag=='1'){
                               res=await api.editPermission(params);
                            }
                            let data=res.data;
                            if(data.code==0){
                                _this.$message({
                                    message:data.msg,
                                    type:"success"
                                });

                            }
                            _this.dialogVisible=false;
                            _this.getMenuList();
                            _this.getParentNodes();
                        }
                    }
                )
            },
            //   选择部门
            selectParent() {
                this.parentDialogVisible = true;
            },
            async handleDelete(row){
                let _this = this;
                _this.$confirm("确定删除吗 ?","系统提示",{
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(async() =>{
                    let params ={
                        id:row.id
                    }
                    let {data:res} = await api.deletePermissionById(params);
                    if(res.code == 0){
                        _this.getMenuList();
                        //刷新上级树
                        _this.getParentNodes();
                    }
                    _this.$message({
                        message: res.msg,
                        type: "success"
                    });
                })
            },
            //   表格工具编辑按钮
            editMenu(row) {
                this.editTag="1";
                this.dialogTitle="编辑权限";
                this.resetForm("addFrom");
                this.getPermissionById(row.id);
                this.dialogVisible=true;

            },
            // 根据Id获取权限
            async getPermissionById(id){
                let param={id:id};
                let {data:res}=await api.getPermissionById(param);
                if(res.code==0){
                    this.addFrom.id = res.data.id;
                    this.addFrom.code = res.data.code;
                    this.addFrom.icon = res.data.icon;
                    this.addFrom.label = res.data.label;
                    this.addFrom.name = res.data.name;
                    this.addFrom.orderNum = res.data.orderNum;
                    this.addFrom.parentId = res.data.parentId;
                    this.addFrom.parentName = res.data.parentName;
                    this.addFrom.path = res.data.path;
                    this.addFrom.type = res.data.type;
                    this.addFrom.url = res.data.url;
                }
            },

            // 添加权限
            addMenu() {
                this.editTag="0";
                this.dialogVisible = true;
                this.dialogTitle = "新增权限";
                //清空表单数据
                this.resetForm("addFrom");
            },
            //解决重置表单时报 'resetFields' of undefined的错
            resetForm(formName) {
                if (this.$refs[formName]) {
                    this.$refs[formName].resetFields();
                }
            },
            //   懒加载函数
            load(tree, treeNode, resolve) {
                setTimeout(() => {
                    resolve([
                        {
                            id: 31,
                            date: "2016-05-01",
                            name: "王小虎",
                            address: "上海市普陀区金沙江路 1519 弄",
                        },
                        {
                            id: 32,
                            date: "2016-05-01",
                            name: "王小虎",
                            address: "上海市普陀区金沙江路 1519 弄",
                        },
                    ]);
                }, 1000);
            },
            // 获取全部菜单列表
            async getMenuList(){
                let{data:res}=await api.getMenuList();
                if(res.code==0){
                    this.menuList=res.data;
                }
            },
            // 从后台加载父节点
            async getParentNodes(){
                let{data:res}=await api.getParentNodes();
                if(res.code==0){
                    this.nodes=res.data;
                }
            }

        },
        mounted() {
            this.$nextTick(() => {
                this.tableHeight = window.innerHeight - 300; //后面的50：根据需求空出的高度，自行调整
            });
        },
      created() {

          // 加载全部菜单权限信息
          this.getMenuList();
          // 加载所有的父节点
          this.getParentNodes();
      }
    };
</script>

<style scoped>
    .el-main {
        padding-top: 0px;
    }
</style>